<template>
	<gracePage :customHeader="false">
		<view slot="gBody">
			<!-- 进度条 -->
			<view class="grace-space-between" style="margin-top: 16rpx;padding: 0 24rpx;">
				<view class="grace-flex-center" style="background-image:url(../../static/cloud_brush_danghang1.png);background-repeat: no-repeat; width: 350rpx;height: 40rpx;background-size: contain;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(255,255,255,1)">1.身份认证</text>
				</view>
				<view class="grace-flex-center" style="background-image:url(../../static/cloud_brush_danghang2.png);background-repeat: no-repeat; width: 350rpx;height: 40rpx;background-size: contain;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(255,255,255,1)">2.储蓄卡认证</text>
				</view>
			</view>

			<view style="margin-top: 35rpx;">
				<!-- reto('/pages/issuer_selection/issuer_selection?banck=实名认证') -->
				<view @tap="xuanzefakahang" class="grace-rows grace-flex-vcenter" style="width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
					<text style="margin-left: 35rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">发卡行：</text>
					<text class="grace-ellipsis" style="position: relative; left: 70rpx; font-size:26rpx;font-weight:400;color:rgba(153,153,153,1);">{{ fakahangname != '' ? fakahangname:'请选择发卡行'}}</text>
					<image src="../../static/jiantou.png" style="position: absolute;left: 650rpx; width: 20rpx;height: 35rpx;"></image>
				</view>
			</view>

			<view class="grace-flex-center" style="width: 750rpx;margin-top: 40rpx;" @tap="getIDCard()">
				<view>
					<image :src=" id_card_img.length>0 ? id_card_img : '../../static/chuxukatu.png'" style=" width: 544rpx;height: 328rpx;"></image>
				</view>
			</view>

			<view @tap="getIDCard()" class="grace-rows grace-flex-center" style="margin-top: 25rpx;">
				<image src="../../static/xiangji.png" style="width: 40rpx;height: 40rpx;"></image>
				<text style="margin-left: 20rpx; font-size:23rpx;font-weight:400;color:rgba(51,51,51,1);">{{ xiangjishuoming }}</text>
			</view>

			<view style="margin-top: 35rpx;">
				<view class="grace-rows grace-flex-vcenter" style="width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
					<text style="margin-left: 35rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">储蓄卡卡号：</text>
					<input type="number" v-model="chuxukahao" placeholder="请输入储蓄卡号" style="margin-left: 30rpx;width: 500rpx" @blur="" />
				</view>

				<view class="grace-rows grace-flex-vcenter" style="margin-top: 2rpx; width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
					<text style="margin-left: 35rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">预留电话：</text>
					<input v-model="yuliudianhua" placeholder="请输入银行预留手机号码" style="margin-left: 60rpx;width: 500rpx" />
				</view>

				<!-- <view style="margin-top: 10rpx;margin-left: 30rpx;">
					<text style="font-size:26rpx;font-weight:400;color:rgba(153,153,153,1);">*仅支持添加{{user_name}}名下储蓄卡</text>
				</view> -->
			</view>
			<view>
				<button @tap="subimt" :style="{background:button_color}"
				class="button_color">立即认证</button>
			</view>
		</view>
	</gracePage>
</template>

<script>
	// #ifdef APP-PLUS
	const card = uni.requireNativePlugin('DC-CardRecognize');
	// #endif
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				id_card_img: '',
				fakahangid: '',
				fakahangname: '',
				chuxukahao: '',
				yuliudianhua: '',
				user_name: '',
				user_id: '',
				img_id: '',
				card_img_id: '',
				xiangjishuoming: '请点击卡片上传图片'

			}
		},
		onLoad: function(opt) {
			// #ifdef APP-PLUS
			this.xiangjishuoming = '请点击卡片上传图片'
			// #endif
			const shiming = uni.getStorageSync('shiming');
			this.user_name = shiming.user_name;
			this.user_id = shiming.user_id;
			this.img_id = shiming.img_id;
			this.card_id = shiming.card_id
		},
		onShow() {
			this.button_color = uni.getStorageSync('button_color');
		},
		components: {
			gracePage
		},
		methods: {
			// 银行发卡行页面跳转
			xuanzefakahang() {
				uni.$once('xuanzefakahang', this.querenfakahang);
				uni.navigateTo({
					url: '/pages/card/issuer_selection?banck=实名认证'
				})
			},
			// 获取发卡行id、名称
			querenfakahang(data) {
				this.fakahangid = data.id,
				this.fakahangname = data.name
			},
			tupian(file_base64, path) {
				var vm = this;
				vm.req.post(
					vm.lochost + '/mytrunk/uploadfile/base64upfile', {
						file: file_base64
					}, {},
					function(res) {
						vm.id_card_img = res.data[0].quan_path;
						vm.card_img_id = res.data[0].id;
					}
				)
			},
			// 上传银行卡照片
			getIDCard() {
				if (this.fakahangid === '') {
					uni.showToast({
						title: '请先选择发卡行喔！',
						icon: 'none'
					})
				} else {
					var vm = this;
					this.UpFile('api/publicapi/upfile',function(res){
						console.log(res);
						if(res.code == 200){
							vm.id_card_img = res.data.quan_path;
							vm.card_img_id = res.data.id;
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},{width:544})
				}
			},
			// 检测卡号
			chaxun(e) {
				var value = e.detail.value
				var vm = this
				vm.req.mypost(
					vm.lochost + '/mytrunk/userapi/yanzhen', {
						card_num: value
					},
					function(res) {
						console.log(res);
						if (res.data.type !== '储蓄卡' || res.data.code == 200) {
							uni.showModal({
								title: '提示',
								content: '请核实该卡号是否有误或是否为储蓄卡',
								showCancel: false,
								confirmText: '我知道了',
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							})
						}
					}
				)
			},
			// 立即认证按钮
			subimt() {
				if (this.chuxukahao === '' || this.fakahangid === '' || this.yuliudianhua === '') {
					uni.showToast({
						title: '请将信息填写完整',
						icon: 'none'
					})
				} else {
					var vm = this;
					this.myPost(
						 'api/userapi/name_authentication', {
							name: this.user_name,
							bank_name: this.fakahangname,
							bank_num: this.chuxukahao,
							id_num: this.user_id,
							bank_phone: this.yuliudianhua,
							id_z_img: this.img_id,
							id_f_img: this.card_id,
							bank_img: this.card_img_id
						},
						function(res) {
							console.log(res);
							if (res.code == 200) {
								uni.removeStorageSync('shiming');
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
								setTimeout(function(){
									uni.navigateBack({
										delta:3
									})
								},1000)
								
							}else{
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						}
					)
				}


			},
			isEmptyObject(obj) {
				for (var key in obj) {
					return false;
				}
				return true;
			}
		}
	}
</script>

<style>
	.button_color{
		margin-top: 70rpx; width:500rpx;height:90rpx;background:#3187D5;box-shadow:0px 2rpx 5rpx 0px rgba(67,67,67,0.3);border-radius:20rpx;font-size:32rpx;font-weight:400;color:rgba(255,255,255,1);
	}
</style>
